import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ContentHeader } from '../../wrapper';
import { actions } from '../action/action';
import Profile from '../../common/profile-for-table'
import table from '../../charts/table';
import { historyListTh } from '../static/index';
import { Tabs } from 'antd';

const TabPane = Tabs.TabPane;

let historyListOptions = {
    title: '历史记录列表',
    limit: 6,
    maxPageCount: 50,
    thead: historyListTh,
    pagebar: true,
    download: false,
    beforeRender: function (data, options) {
        return [
            <Name data={data} />,
            <Time data={data} />,
            <Profile
                data={{
                    id: data.contact.id,
                    name: data.contact.name,
                    headImage: data.contact.headImage
                }}
            />

        ]
    },
    trigger: []
}


class Detail extends Component {
    componentWillMount() {
        const { currentId, setCurrentId, setDetailInfo, data } = this.props;
        let id = this.props.location.query.id;
        const curData = data.find(item => { return item.id == id });
        if (currentId !== id && curData) {
            setCurrentId(id);
            setDetailInfo(curData);
        }
    }
    render() {
        const { name } = this.props.detailInfo;
        return (
            <div className="workflowDetail">
                <ContentHeader title={name || ''}>
                    <ol className="breadcrumb">
                        <li><a href="#/workflows">所有任务模板</a></li>
                        <li className="active">任务模板明细</li>
                    </ol>
                </ContentHeader>
                {/* <div className="nav-tabs-custom">
                    <ul className="nav nav-tabs">
                        <li className="active"><a href="#tab_1" data-toggle="tab">执行任务</a></li>
                        <li><a href="#tab_2" data-toggle="tab">历史记录</a></li>
                        {/* <li><a href="#tab_3" data-toggle="tab">Prefrence</a></li>
                        <li><a href="#tab_4" data-toggle="tab">Settings</a></li>}
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active" id="tab_1">
                            <Events />
                        </div>
                        <div className="tab-pane" id="tab_2">
                            <History />
                        </div>
                    </div>
                </div> */}
                <div className="content">
                    <Tabs defaultActiveKey="1" >
                        <TabPane tab="执行任务" key="1"><Events /></TabPane>
                        <TabPane tab="历史记录" key="2"><History /></TabPane>
                    </Tabs>
                </div>


            </div>
        );
    }
}


const _Detail = connect(
    state => {
        return {
            currentId: state.detail.currentId,
            data: state.workflowList.data,
            detailInfo: state.detail.detailInfo,


        }
    },
    dispatch => {
        return {
            setCurrentId: (id) => {
                dispatch({
                    type: 'set-current-id',
                    val: id
                });
            },
            setDetailInfo: (info) => {
                dispatch({
                    type: 'set-detail-info',
                    val: info
                });
            }
        }
    }
)(Detail);


class Events extends Component {

    render() {

        return (
            <div>
                <ul className="timeline">
                    <li>
                        <i className="fa fa-users bg-gray"></i>
                        <div className="timeline-item">
                            <p className="timeline-header no-border">触发条件:<a href="javascript:void(0)">当客户拥有了新的订单</a></p>
                        </div>
                    </li>
                    <li>
                        <i className="fa fa-plus bg-gray"></i>
                    </li>
                    <li className="add-event">
                        <i className="fa fa-tasks bg-aqua"></i>
                        <div className="timeline-item">
                            <p className="timeline-header no-border">新增一条任务:<a href="javascript:void(0)">发送短信任务  1小时后 感谢客户购买短信模块</a></p>
                        </div>
                    </li>
                    <li>
                        <i className="fa fa-plus bg-gray"></i>
                    </li>
                    <li>
                        <i className="fa fa-tasks bg-aqua"></i>
                        <div className="timeline-item">
                            <p className="timeline-header no-border">新增一条任务:<a href="javascript:void(0)">发送短信任务  1天后 提示产品使用和保养短信模板</a></p>
                        </div>
                    </li>
                    <li>
                        <i className="fa fa-plus bg-gray"></i>
                    </li>
                    <li>
                        <i className="fa fa-tasks bg-yellow"></i>
                        <div className="timeline-item">
                            <p className="timeline-header no-border">新增一条任务:<a href="javascript:void(0)">电话拨打任务  7天后 产品贵宾专享活动电话话术模板</a></p>
                        </div>
                    </li>
                    <li>
                        <i className="fa fa-plus bg-gray"></i>
                    </li>
                    <li>
                        <i className="fa fa-tasks bg-navy"></i>
                        <div className="timeline-item">
                            <p className="timeline-header no-border">新增一条任务:<a href="javascript:void(0)">电话拨打任务  30天后 产品反馈收集电话话术模板</a></p>
                        </div>
                    </li>
                    <li>
                        <i className="fa fa-plus bg-gray"></i>
                    </li>
                </ul>
            </div>
        );
    }
}


class History extends Component {
    render() {

        return (
            <div className="content">
                <HistoryList options={historyListOptions} />
            </div>
        );
    }
}


const HistoryList = connect(
    state => {
        return state.historyList
    },
    dispatch => {
        return {
            getData: (params) => {
                actions.historyListSetPageIndex(dispatch, params);
                actions.historyListRenderData(dispatch, params);
                actions.historyListRequest(dispatch, params);
            }
        }
    }
)(table);


class Name extends Component {
    render() {
        const name = this.props.data.name;

        return <div className="preview-media-limit preview-media-limit-group">
            <p>{name} </p>
        </div>
    }
}

class Time extends Component {
    render() {
        const time = this.props.data.time;

        return <div className="preview-media-limit preview-media-limit-group">
            <p>{time} </p>
        </div>
    }
}


export default _Detail;